<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/montage-serialization">{
        "comp1": {
            "prototype": "montage/ui/component.reel",
            "values": {
                "element": {"#": "comp1"}
            }
        },

        "comp2": {
            "prototype": "montage/ui/component.reel",
            "values": {
                "element": {"#": "comp2"}
            }
        },

        "comp3": {
            "prototype": "montage/ui/component.reel",
            "values": {
                "element": {"#": "comp3"}
            }
        },

        "otherComp": {
            "prototype": "montage/ui/component.reel",
            "values": {
                "element": {"#": "otherComp"}
            }
        },

        "comp4": {
            "prototype": "montage/ui/component.reel",
            "values": {
                "element": {"#": "comp4"}
            }
        },

        "comp5": {
            "prototype": "montage/ui/component.reel",
            "values": {
                "element": {"#": "comp5"}
            }
        },

        "comp6": {
            "prototype": "montage/ui/component.reel",
            "values": {
                "element": {"#": "comp6"}
            }
        },

        "otherComp2": {
            "prototype": "montage/ui/component.reel",
            "values": {
                "element": {"#": "otherComp2"}
            }
        }
    }</script>
</head>
<body>
    <div data-montage-id="comp1">
        <div>
            <h2 data-arg="section" class="section">Section</h2>
        </div>
        <h3 data-arg="paragraph" class="paragraph">Paragraph</h3>
    </div>

    <div data-montage-id="comp2">
        <h2 class="section">Section</h2>
    </div>

    <div data-montage-id="comp3">
        <div data-arg="one" class="one">
            <div data-montage-id="otherComp">
                <div data-arg="one"></div>
                <div data-arg="two"></div>
            </div>
        </div>
        <div data-arg="two" class="two"></div>
    </div>

    <div data-montage-id="comp4">
        <div data-montage-id="componentLess">
            <div data-arg="one"></div>
            <div data-arg="two"></div>
        </div>
    </div>

    <div data-montage-id="comp5">
        <table>
            <tr>
                <td data-arg="one"></td>
            </tr>
        </table>
    </div>

    <div data-montage-id="comp6">
        <table>
            <tr>
                <td data-arg="one" class="one">
                    <div data-montage-id="otherComp2">
                        <div data-arg="one"></div>
                        <div data-arg="two"></div>
                    </div>
                </td>
                <td data-arg="two" class="two"></td>
            </tr>
        </table>
    </div>
</body>
</html>